<ul [id]="appendId('list')" [ngClass]="{'ti3-timeline-multistage': titleOptions.length > 0}">
  <li
    *ngFor="let item of options; index as i"
    class="ti3-timeline-container"
    [ngClass]="{'ti3-timeline-completed': item.type === 'success'}"
  >
    <span
      class="ti3-timeline-label"
      [id]="appendId('label_' + i)"
      [ngClass]="{'ti3-timeline-info': item.type === 'info',
            'ti3-timeline-success': item.type === 'success',
            'ti3-timeline-warning': item.type === 'warning',
            'ti3-timeline-danger': item.type === 'danger',
            'ti3-timeline-currentStep': i === activeIndex}"
    >
      <span
        *ngIf="item.isTitle"
        class="ti3-timeline-level1"
        [ngClass]="{'ti3-timeline-level1-success': item.type === 'success' || i === activeIndex,
                    'ti3-timeline-processing': !isSuccess(item) || i === activeIndex}"
      >
        <span *ngIf="item.type !== 'success' || !isSuccess(item)">{{findItemIndex(item) + 1}}</span>
        <ti-icon *ngIf="item.type === 'success' && isSuccess(item)" name="alert-success"></ti-icon>
      </span>
      <ng-container *ngTemplateOutlet="itemTemplate?itemTemplate:defaultItemTemplate;context: {$implicit: item, index: i}"></ng-container>
    </span>
  </li>
</ul>

<ng-template #defaultItemTemplate let-item let-i="index">
  <div class="ti3-timeline-label-container">
    <span
      [ngClass]="{'ti3-timeline-active': i === activeIndex,
                      'ti3-timeline-active-danger': i === activeIndex && item.type === 'danger',
                      'ti3-timeline-label-level1': item.isTitle}"
      >{{item.label}}</span
    >
    <ti-icon
      name="cloud-action-tip"
      *ngIf="item.iconTip"
      [tiTip]="item.iconTip"
      [tiTipPosition]="item.iconTipPosition"
      [tiTipMaxWidth]="item.iconTipMaxWidth"
      class="ti3-timeline-icontip"
    ></ti-icon>
    <span *ngIf="titleOptions.length > 0">
      <span class="ti3-timeline-time" *ngIf="item.time && item.type === 'success'" [ngClass]="{'ti3-timeline-time-level2': !item.isTitle}"
        >{{item.time}}</span
      >
    </span>
  </div>
  <span *ngIf="titleOptions.length <= 0" class="ti3-timeline-time">{{item.time}}</span>
  <div *ngIf="item.type === 'danger'">
    <ng-container *ngTemplateOutlet="errorMessageTemplate; context: {$implicit: item}"></ng-container>
  </div>
</ng-template>
<!-- 执行失败，错误信息 -->
<ng-template #errorMessageTemplate let-item>
  <span class="ti3-timeline-errorMessagg" [innerHTML]="item.errorMessage"></span>
</ng-template>
